<template>
  <div class="page_resignLog">
    <van-nav-bar title="辞职申请记录" left-arrow @click-left="$router.go(-1)"> </van-nav-bar>

    <div v-if="resignLogList.length">
      <resign-item
        v-for="(resignItem, index) in resignLogList"
        :key="resignItem.id"
        :resignItem="resignItem || {}"
      ></resign-item>

      <van-pagination
        v-model="queryObj.pageIndex"
        :total-items="total"
        :items-per-page="queryObj.pageSize"
        @change="getPaginationValue_resignLog"
        force-ellipses
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

    <van-divider style="margin-top: 80px" v-else>暂无记录</van-divider>

  </div>
</template>

<script>


import {Toast} from "vant";
import resignItem from "./common/resignItem";

export default {
  name: 'resignLog',
  components: {
    resignItem,
  },
  data() {
    return {
      resignLogList: [],
      total: 0,
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        // 其他参数待定
        keyword: '',
        timeDate: '',
      },
    }
  },
  created() {
    if (this.$route.query.userId && this.$route.query.jobId){
      this._getResignLogs();
    } else {
      Toast('参数不存在，请返回重新进入该页面！');
      this.$router.back();
    }
  },

  methods: {
    async _getResignLogs(params){
       const needParamsObj = {
         UserId: this.$route.query.userId,
         JobId: this.$route.query.jobId,
         ...params
       };
       const resp = await this.$api.job.sendGetResign(needParamsObj);
       if (resp.code === 200){
         // 根据接口的值, 进行相应的修改，一般如下这样的
         this.resignLogList = resp.data.items
         this.total = resp.data.count || 0
       }
    },

    getPaginationValue_resignLog(val){
      console.log('翻页', val);
      // 指定页
      Object.assign(this.queryObj, {pageIndex: val});

      this._getResignLogs(this.queryObj);
    },
  },

}
</script>

<style lang="scss" scoped>
.page_resignLog{
  width: 100%;
  box-sizing: border-box;
}
</style>
